<template>
    <table-row-detail-dialog
      ref="detailDialog"
      dialog-title="新增纠错"
      dialog-width="960px"
      @confirm="handleConfirm"
    >
      <div v-if="mediaInfo" class="dialogBody" style="height: 500px;display: flex">
        <div style="width: 600px;height: 500px;flex-shrink: 0;position: relative;">
          <div v-if="beginCanvasMark && type == 'd'" style="height: 100%;width: 100%;">
            <img :src="filePath + formData.imageUrl" style="height: 100%;width: 100%;object-fit: contain;"/>
          </div>
          <file-show
            v-show="!(beginCanvasMark && type=='d')"
            :style="type == 'd' ? 'height: 100%;width: 100%;' : 'width: 600px;height: 320px;'"
            ref="fileShow"
            :media-type="mediaInfo.mediaType"
            :play-path="mediaInfo.playPath"
          ></file-show>
          <CanvasMark v-if="beginCanvasMark" style="position: absolute;top: 0;" 
            :origin-size="{ width: canvasWidth, height: canvasHeight }"
            :scale-size="{ width: 600, height: type != 'd' ? 320 : 500 }"
            :fill-mode="false"
            @setRect="canvasMarkEvent"
            >
          </CanvasMark>
        </div>
        <div style="margin-left: 10px;width: 300px;height: 100%;padding: 10px;">
          <el-button type="primary" @click="addCanvasMark">添加标注</el-button>
          <el-button type="primary" @click="clearCanvasMark">清除标注</el-button>
          <div style="margin-top: 10px;">点击添加标注后，在左侧内容区域框选标注，然后填写下列表单后提交。</div>
          <el-form :model="formData" label-position="top" :rules="rules" ref="form">
            <el-form-item v-if="!addOcr" label="问题分类" prop="categoryId">
              <el-cascader
                style="width: 100%;"
                v-model="formData.categoryId"
                :options="categorys"
                :props="{
                  label: 'categoryName',
                  value: 'categoryId',
                  children: 'child',
                  checkStrictly: true,
                  emitPath: false
                }"
              ></el-cascader>
            </el-form-item>
            <el-form-item v-if="!addOcr" label="问题内容" prop="imageDescribe">
              <el-input v-model="formData.imageDescribe"></el-input>
            </el-form-item>
            <el-form-item v-if="addOcr" label="识别内容" prop="ocrText">
              <el-input v-model="formData.ocrText" type="textarea"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </table-row-detail-dialog>
</template>

<script>
import TableRowDetailDialog from '@/components/TableRowDetailDialog/index';
import FileShow from '@/components/FileShow';
import { getAiCategory, addSmartErr, addOcrText, getDocPic} from '@/api/serve/media-ai.js';
import { timeToSeconds, secondsToTimeFormat} from '@/utils';
import { shotNoScale } from '@/api/serve/media-file';

export default {
  name: 'AddSmartMark',
  components: { TableRowDetailDialog, FileShow },
  data() {
    return {
      filePath: filePath,
      type: 'v',
      formData: {
        fileId: "",
        fileType: "",
        categoryId: "",
        imageConfidence: 100,
        imageDescribe: "",
        imageUrl: "",
        occurPage: 0,
        startTime: "",
        endTime: "",
        startX: 0,
        startY: 0,
        height: 0,
        width: 0
      },
      categorys: [],
      rules: {
        categoryId: [
          { type: 'string', required: true, message: '请选择问题分类', trigger: 'change' }
        ],
        imageDescribe: [
          { type: 'string', required: true, message: '请选择问题内容', trigger: 'blur' }
        ],
      },
      beginCanvasMark: false,
      mediaInfo: null,
      docImageSize: { width: 600, height: 360 },
      addOcr: false
    }
  },
  computed: {
    canvasWidth() {
      if(this.type == 'v') {
        if(this.mediaInfo && this.mediaInfo.vidSize) {
          return Number(this.mediaInfo.vidSize.split('x')[0]);
        } else {
          return 0;
        }
      } else if(this.type == 'p') {
        if(this.mediaInfo && this.mediaInfo.picSize) {
          return Number(this.mediaInfo.picSize.split('*')[0]);
        } else {
          return 0;
        }
      } else if(this.type == 'd') {
        return this.docImageSize.width;
      } else {
        return 0;
      }
    },
    canvasHeight() {
      if(this.type == 'v') {
        if(this.mediaInfo && this.mediaInfo.vidSize) {
          return Number(this.mediaInfo.vidSize.split('x')[1]);
        } else {
          return 0;
        }
      } else if(this.type == 'p') {
        if(this.mediaInfo && this.mediaInfo.picSize) {
          let height = this.mediaInfo.picSize.split('*')[1];
          return Number(height.substring(0, height.indexOf('px')));
        } else {
          return 0;
        }
      } else if(this.type == 'd') {
        return this.docImageSize.height;
      } else {
        return 0;
      }
    }
  },
  methods: {
    show(mediaInfo, addOcr = false) {
      Object.assign(this.$data, this.$options.data());
      this.mediaInfo = mediaInfo;
      this.type = mediaInfo.mediaType;
      this.addOcr = addOcr;
      if(this.addOcr) {
        this.formData = {
          fileId: "",
          fileType: "",
          filePage: 0,
          imageUrl: "",
          ocrText: "",
          videoSec: 0,
          startX: 0,
          startY: 0,
          height: 0,
          width: 0
        };
        this.rules = {
          ocrText: [
            { type: 'string', required: true, message: '请输入识别内容', trigger: 'blur' }
          ],
        }
      }
      this.formData.fileId = mediaInfo.fileId;
      this.formData.fileType = mediaInfo.fileType;
      this.$refs.detailDialog.show('add');
      getAiCategory().then((res) => {
        this.categorys = res;
      });
    },
    handleConfirm(){
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          if(!this.formData.imageUrl || !this.formData.height) { 
            this.$message.error("请先添加标注！");
            return false;
          }
          if(this.addOcr) {
            await addOcrText(this.formData);
          } else {
            await addSmartErr(this.formData);
          }
          this.$message.success('提交成功');
          this.$emit('success', this.type);
          this.$refs.detailDialog.hide();
        } else {
          return false;
        }
      });
    },
    addCanvasMark() {
      if(this.type == 'v') {
        this.$refs.fileShow.$refs.videoPlay.$refs.veo.pause();
        this.$refs.fileShow.$refs.videoPlay.$refs.veo.controls = false;
        let current = secondsToTimeFormat(this.$refs.fileShow.$refs.videoPlay.$refs.veo.currentTime);
        if(this.addOcr) {
          this.formData.videoSec = this.$refs.fileShow.$refs.videoPlay.$refs.veo.currentTime.toFixed(3);
        } else {
          this.formData.startTime = current;
          this.formData.endTime = current;
        }
        shotNoScale(this.mediaInfo.fileId, this.$refs.fileShow.$refs.videoPlay.$refs.veo.currentTime.toString()).then((res) => {
          this.formData.imageUrl = res.fileUrl;
          this.beginCanvasMark = true;
        });
      } else if (this.type == 'p') {
        this.formData.imageUrl = this.mediaInfo.playPath;
        this.beginCanvasMark = true;
      } else if (this.type == 'd') {
        this.formData.occurPage = this.$refs.fileShow.$refs.PDF.getCurrentPage();
        getDocPic(this.mediaInfo.fileId, this.formData.occurPage).then((res) => {
          this.formData.imageUrl = res.imgPath;
          this.docImageSize.width = res.width;
          this.docImageSize.height = res.height;
          this.beginCanvasMark = true;
        });       
      }
    },
    clearCanvasMark() {
      if(this.type == 'v') {
        this.$refs.fileShow.$refs.videoPlay.$refs.veo.controls = true;
      }
      this.formData.startTime = "";
      this.formData.endTime = "";
      this.formData.imageUrl = "";
      this.formData.startX = 0;
      this.formData.startY = 0;
      this.formData.height = 0;
      this.formData.width = 0;
      this.formData.occurPage = 0;
      this.beginCanvasMark = false;
    },
    canvasMarkEvent(rect) {
      this.formData.startX = Math.round(rect.left);
      this.formData.startY = Math.round(rect.top);
      this.formData.height = Math.round(rect.height);
      this.formData.width = Math.round(rect.width);
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
